<script setup>
import { getNoticeDetail, handleImage } from '@/api/data.js'
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

wx.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline'],
})

const noticeDetail = ref({})
const loading = ref(false)

// 处理正文中的图片地址，避免相对路径无法加载
const processedContent = computed(() => handleImage(noticeDetail.value?.content))

const formattedTime = computed(() => {
  if (!noticeDetail.value.publishTime) {
    return '--'
  }
  const date = new Date(noticeDetail.value.publishTime.replace(/-/g, '/'))
  if (Number.isNaN(date.getTime())) {
    return noticeDetail.value.publishTime
  }
  const pad = (num) => num.toString().padStart(2, '0')
  const year = date.getFullYear()
  const month = pad(date.getMonth() + 1)
  const day = pad(date.getDate())
  const hours = pad(date.getHours())
  const minutes = pad(date.getMinutes())
  const seconds = pad(date.getSeconds())
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
})

onLoad((query) => {
  if (!query.id) {
    return
  }
  loading.value = true
  getNoticeDetail(query.id)
    .then((res) => {
      noticeDetail.value = res.data?.data || {}
    })
    .catch(() => {
      uni.showToast({
        title: '公告详情获取失败',
        icon: 'none',
      })
    })
    .finally(() => {
      loading.value = false
    })
})
</script>
<template>
  <div class="notice-detail">
    <div class="title">{{ noticeDetail.title || '暂无标题' }}</div>
    <div class="meta">
      <div class="time">{{ formattedTime }}</div>
    </div>
    <div class="content" v-if="processedContent" v-html="processedContent"></div>
    <div class="empty" v-else-if="!loading">
      <img class="icon" src="/static/icon/empty.svg" alt="" />
      <div class="text">暂无内容</div>
    </div>
    <div class="loading" v-if="loading">加载中...</div>
  </div>
</template>
<style>
page {
  background: #fff;
}
</style>
<style lang="scss" scoped>
p {
  margin-bottom: 20rpx;
}
image {
  max-width: 100%;
  border-radius: 8rpx;
  margin: 16rpx 0;
}
.notice-detail {
  padding: 24rpx;
}

.title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.4;
  margin-bottom: 16rpx;
}

.meta {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #999;
  gap: 16rpx;
  margin-bottom: 32rpx;
}

.content {
  font-size: 30rpx;
  line-height: 1.8;
  color: #333;
  word-break: break-word;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
  color: #aaa;
  font-size: 28rpx;

  .icon {
    width: 120rpx;
    height: 120rpx;
  }
}

.loading {
  text-align: center;
  color: #666;
  font-size: 28rpx;
}
</style>
